<template>
     <div class="app">
        <div class="title">
            <h3 class="title_h3">
               {{InfoList.title}}
            </h3>
            <p class="title_p">
                 {{InfoList.add_time| fmtdate('YYYY-MM-DD')}} {{InfoList.click}}次浏览 
            </p>
        </div>
        <!-- 九宫格 -->
       <!--   <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-for="sudokuImg in sudokuImgList">
                        <img :src="sudokuImg.src" class="preview-img" @click="$preview.open(index, sudokuImgList)"/>
                        <span class="mui-icon mui-icon-new"></span>
                </li>
        </ul>  -->
         <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li v-for="(item, index) in sudokuImgList"
                class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <img class="preview-img"
                     :src="item.src" height="100" @click="$preview.open(index, sudokuImgList)">
            </li>
        </ul>

        <!-- content内容 -->
        <div class="content" v-html="InfoList.content">
            
        </div>
     </div>   
</template>


<script>
  //导入api的URL
    import common from '../../kits/common.js';
    export default{
        created(){
                // 获得路由的ID
              this.id = this.$route.params.id;
              this.getimageInfoList(this.id);
              this.getSudokuImg();
        },
        data(){
         return {
                InfoList:{},
                sudokuImgList:[],
                id:0
            }
        },
        methods:{
            // 获得图片的详情内容
             getimageInfoList(id){
                let url = common.apihost+'/api/getimageInfo/'+id;
                this.$http.get(url).then(res=>{
                     this.InfoList = res.body.message[0];

                });
             },
             // 获得九宫格的数据
             getSudokuImg(){
                let url = common.apihost+'/api/getthumimages/'+this.id;
                this.$http.get(url).then(res=>{
                     this.sudokuImgList = res.body.message;
                      this.sudokuImgList.forEach(item=>{
                              item.src = common.imghost + item.src;
                              item.w = 600;
                              item.h = 400;
                      })                
                });
             }
        }
       
    }
</script>

<style scoped>
      .app .title{
        padding-top: 10px;
        border-bottom:1px solid #ddd;
        text-align: left;
    }
    .app .title .title_h3{
        font-size:16px;
        color:#0094ff;
    }
    .app .title .title_p {
        font-size: 12px;
        color:#bbb;
    }
    .app .content{
        text-align: left;
    }

    /*九宫格*/
    /*9宫格样式重写*/
   .mui-grid-view.mui-grid-9{
       background-color: #fff;
   }
   .mui-grid-view.mui-grid-9 .mui-table-view-cell{
       border-bottom: none;
       border-right:none;
   }
   .mui-grid-view.mui-grid-9 .mui-table-view-cell{
       padding: 5px;;
   }
   .mui-grid-view.mui-grid-9 .mui-table-view-cell > a:not(.mui-btn){
       padding: 0;
   }

     /*清除默认的样式*/
 /* .mui-icon-new:before,
  .mui-icon-share:before,
  .mui-icon-shopping:before,
  .mui-icon-msg:before,
  .mui-icon-video:before,
  .mui-icon-about:before{
      content: '';
  }*/
</style>